<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
export default {
  props: ["cityData"],
  data() {
    return {
      map: {},
      mapEdit: {}
    };
  },
  methods: {
    initMap() {
      // this.mapEdit.zoom = 11
      this.map = new AMap.Map("container", {
        zoom: 11
      });
      AMap.plugin('AMap.Geocoder', ()=> {
  var geocoder = new AMap.Geocoder({
    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
    city: '010'
  })
 
    let { lng, lat } = this.map.getCenter();
    const lnglat = [lng,lat]

  geocoder.getAddress(lnglat, (status, result)=>{
    if (status === 'complete' && result.info === 'OK') {
      // console.log('result: ',  result.regeocode.addressComponent.city);
      this.$emit('MapStart',result.regeocode.addressComponent.city)
        // result为对应的地理位置详细信息
    }
  })
})
    },
    getMapInfo() {
     this.$axios({
      //  method:'get',
       url:'https://restapi.amap.com/v3/place/text',
       params:{
         key:'cff7a0701c5436ccca3ea16dc547f0b9',
         city:this.cityData.name
       }
     }).then(res=>{
     const {data} = res
    //  console.log('data: ', data);

     })
    }
  },
  mounted() {
    this.initMap();
  },
  watch: {
    cityData() {
      // console.log("监听");
      this.getMapInfo();
    }
  }
};
</script>
<style lang="less" scoped>
#container {
  width: 400px;
  height: 100%;
}
</style>